<template>
  <!-- 显示商品的三方ID -->
  <el-dialog :title="'对接详情'" :visible.sync="dialogVisible" @close="close" :close-on-click-modal="false" append-to-body width="1060px">
    <div style="padding-bottom: 60px;">
      <div style="color: #999;">
        提示：上下架会同步三方平台，可能会有延迟，请不要频繁进行上下架操作！
      </div>
      <div class="flex top">
        <span>
          <span>游戏：</span>
          <span class="val">{{ goodsInfo.gameName }}</span>
        </span>
        <span>
          <span>商品编号：</span>
          <span class="val">{{ goodsInfo.id }}</span>
        </span>
        <span>
          <span>游戏账号：</span>
          <span class="val">{{ goodsInfo.accountNumber||'' }}</span>
        </span>
      </div>
      <el-table border stripe :data="list">
        <el-table-column prop="interfaceUserName" label="渠道名称"></el-table-column>
        <el-table-column prop="channelType" label="对接类型" width="100">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.channelType==1">接口</el-tag>
            <el-tag type="warning" v-if="scope.row.channelType==2">脚本</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="interfaceUserName" label="对接状态" width="80">
          <template slot-scope="scope">
            {{scope.row.artRec?'已对接':'未对接'}}
          </template>
        </el-table-column>
        <el-table-column prop="interfaceUserName" label="对接时间" width="160">
          <template slot-scope="scope">
            {{scope.row.artRec?(scope.row.artRec.updateTime||scope.row.artRec.createTime):''}}
          </template>
        </el-table-column>

        <el-table-column prop="outid" label="三方编号">
          <template slot-scope="scope">
            {{scope.row.artRec?scope.row.artRec.outid:''}}
          </template>
        </el-table-column>
        <el-table-column prop="outid" label="三方价格">
          <template slot-scope="scope">
            {{scope.row.artRec?scope.row.artRec.tuisongjia:''}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button size="mini" v-if="scope.row.infoUrl&&scope.row.artRec" type="warning" @click="viewPage(scope.row)">查看</el-button>
            <el-button size="mini" type="danger" v-if="scope.row.artRec&&!scope.row.saleName.includes('JIAOYIMAO')" :loading="xiajiaLoading==scope.row.id" @click="caozuoFn(scope.row,'del')">下架</el-button>
            
            <el-button size="mini" type="primary" v-if="!scope.row.artRec&&!scope.row.saleName.includes('JIAOYIMAO')" :loading="xiajiaLoading==scope.row.id" @click="caozuoFn(scope.row,'add')">上架</el-button>
            <el-button size="mini" type="warning" plain @click="openLogDialog(scope.row)">推送记录</el-button>
            <el-button size="mini" v-if="scope.row.artRec" type="danger"  @click="delGoods(scope.row)">改为未对接</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="bot-box">
      <el-button type="primary" @click="yijian('add')" :loading="btnloading">一键上架</el-button>
      <el-button type="danger" @click="yijian('del')" :loading="btnloading">一键下架</el-button>
    </div>

    <showLogs ref="showLogs"></showLogs>
  </el-dialog>
</template>

<script>
import goodsListApi from "../../../api/gameConfig/goodsList";
import showLogs from "./showLogs.vue";
export default {
  name: "",
  components: { showLogs },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      btnloading: false,
      xiajiaLoading: null,
      shangjiaLoading: false,
      list: [],
      id: "",
      viewUrlMap: {
        JYM: "",
      },
      timer: null,
      goodsInfo: {},
    };
  },
  created() {},
  methods: {
    open(goodsInfo) {
      this.goodsInfo = goodsInfo;
      this.id = goodsInfo.id;
      this.dialogVisible = true;
      this.xiajiaLoading = null;
      this.btnloading = false;
      this.getList();
    },
    // 跳转三方页面
    viewPage(row) {
      let url = row.infoUrl;
      if (url) {
        if (row.infoUrl.includes("xxx") && row.artRec && row.artRec.outid) {
          url = row.infoUrl.replace(/xxx/g, row.artRec.outid);
        }
        window.open(url);
      }
    },
    // 推送记录  打开
    openLogDialog(row) {
      this.$refs.showLogs.open(this.id, row.saleName, row.channelType);
    },
    // 一键上下架
    yijian(type) {
      let ids = [];
      if (this.list && this.list.length) {
        if (type == "del") {
          this.list.forEach((r) => {
            if (r.artRec&&!r.saleName.includes('JIAOYIMAO')) {
              ids.push(r.id);
            }
          });
        } else if (type == "add") {
          this.list.forEach((r) => {
            if (!r.artRec&&!r.saleName.includes('JIAOYIMAO')) {
              ids.push(r.id);
            }
          });
        }
      } else {
        return this.$message.error("暂无对接渠道！");
      }
      if (ids.length == 0) {
        return this.$message.error(
          `没有可以${type == "del" ? "下架" : "上架"}的渠道！`
        );
      }
      this.$confirm(
        `该操作会将所有对接渠道${type == "del" ? "下架" : "上架"}，是否继续？`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.btnloading = true;
          const obj = {
            id: this.id,
            configIds: ids.join(","),
            type,
          };
          this.startInterval();
          goodsListApi.yijianByGoods(obj).then((res) => {
            this.btnloading = false;
            this.getList();
            if (this.timer) clearInterval(this.timer);
            if (res.code == 200) {
              this.$message.success('请求已提交，请以推送结果为准！可在推送记录查看详情。');
            }
          });
        })
        .catch(() => {
          if (this.timer) clearInterval(this.timer);
        });
    },
    // 删除
    delGoods(row){
      this.$confirm(
        `该操作 <span style="color:red">不会同步</span> 三方渠道，只将本系统的对接状态改为未对接，<span style="color:red">操作前请务必确认三方渠道已下架或删除</span> 该商品，是否继续？`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          dangerouslyUseHTMLString: true
        }
      ).then(async ()=>{
        try {
         const res = await goodsListApi.delOnePlat({
          goodsId:this.id,
          config:row.id,
          interfaceUserName:row.interfaceUserName
         })
         if(res.code==200){
          this.$message.success('操作成功！');
         }
        } catch (error) {
          
        }
      })
    },
    // 下架 上架等
    caozuoFn(row, type) {
      const obj = {
        id: this.id,
        config: row.id,
        type,
      };
      this.xiajiaLoading = row.id;
      goodsListApi
        .pushApiByGoods(obj)
        .then((res) => {
          this.getList();
          this.xiajiaLoading = null;
          if (res.code == 200) {
            this.$message.success('请求已提交，请以推送结果为准！可在推送记录查看详情。');
          }
        })
        .catch((err) => {
          this.xiajiaLoading = null;
        });
    },
    // 轮询列表
    startInterval() {
      if (this.timer) clearInterval(this.timer);
      this.timer = setInterval(() => {
        this.getList();
      }, 3000);
    },
    getList() {
      // console.log("%c Line:36 🍎 res", "color:#2eafb0", 111);
      goodsListApi.getGoodsThirdInfo({ id: this.id }).then((res) => {
        // console.log("%c Line:36 🍎 res", "color:#2eafb0", res);
        this.list = res.data;
      });
    },
    close() {
      if (this.timer) clearInterval(this.timer);
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped lang="scss">
.top{
  height: 40px;
  background: #f3f3f3;
  align-items: center;
  padding: 0 15px;
  border-radius: 8px 8px 0 0;
  >span{
    margin-right: 20px;
    .val{
      color: #000;
    }
  }
}
.bot-box {
  width: 100%;
  height: 60px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #fff;
  border-top: 1px solid #ccc;
  padding-top: 15px;
  z-index: 9;
  text-align: center;
}
</style>
